<template>
  <commonformdialog
    :isshowDialogs="showmap"
    :dialogTitle="maptitle"
    @closetextDialog="closetextDialogMap"
    @confirmbtn="confirmbtnMap"
    :dialogWidth="'750px'"
  >

      <div class="mapBox">
      <div class="search_Map">
         <el-input type="text"  placeholder="请输入关键字" clearable v-model="address" size="small">
                    <template slot="append"
                      ><span @click="searchMap(address)">搜索</span></template
                    >
                  </el-input>

        <div class="content">
          <p v-for="(i,index) in addressList" :key="index" @click="select(i)">
            {{i.title}}
            <span class="address">{{i.address}}</span>
          </p>
        </div>
      </div>
      <div id="container"></div>
    </div>
  </commonformdialog>
</template>
​
<script>
import commonformdialog from "@/components/commondialog/commondialog";
import {commonMapsearch} from "@/api/common";
var geocoder;
export default {
  name: "Index",
  data() {
    return {
       value: "", //搜索内容
      addressList: [], //搜索结果
      selectValue: {}, //选择的某个结果
       timeout: null, //搜索定时器
      map: null,
      marker: null,
      longitude: "104.03817", //经度
      latitude: "30.619768", //纬度
      address: "",
      city: 2278,
      position: null,
    };
  },
  components: {
    commonformdialog,
    // selecteMap,
  },
  props: {
    mapData: {
      type: Object,
    },
    showmap: {
      type: Boolean,
      default: false,
    },
    maptitle: {
      type: String,
      default: "选择",
    },
  },

  methods: {
     //地址搜索
    async searchMap(value) {
       let data =await commonMapsearch({keyword:value})
       if(data.code=='0000'){
          this.addressList=data.data
       }
    },
     select(row) {
      this.selectValue = row.location;
      console.log(this.selectValue);
      this.longitude=this.selectValue.lng
      this.latitude=this.selectValue.lat
      this.address=row.address
      this.addressList = [];
      let self = this;

      //更新地图中心位置
       let myLatlng = new qq.maps.LatLng(this.selectValue.lat, this.selectValue.lng);
      self.map.setCenter(myLatlng);

      //判断是否存在标记点，有的话清空
      if (self.marker) {
        self.marker.setMap(null);
        self.marker = null;
      }

      //初始化marker
      self.marker = new qq.maps.Marker({
        position: myLatlng,
        map: self.map,
      });
     },
    closetextDialogMap() {
      this.$emit("closetextDialogMap");
    },
    confirmbtnMap() {
    
      let selecteParams = {
        lat: this.latitude,
        lng: this.longitude,
        address: this.address,
      };
      this.$emit("confirmbtnMap", selecteParams);
    },
    /**
     * /定位获得当前位置信息
     */
    //定位获得当前位置信息

    getMyLocation() {
      var geolocation = new qq.maps.Geolocation(
        "YXSBZ-T5RWJ-375FU-FBPN7-QHVQK-BYB7L",
        "YXSBZ-T5RWJ-375FU-FBPN7-QHVQK-BYB7L-wj"
      );
      geolocation.getLocation(this.showPosition, this.showErr);
      //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
    },
    showPosition(position) {

      this.latitude = position.lat;
      this.longitude = position.lng;
      this.city = position.city;
      this.setMap();
    },
    showErr() {
      this.getMyLocation(); //定位失败再请求定位，测试使用
    },
    search() {
      geocoder.getLocation(this.address);
    },
    //位置信息在地图上展示
    setMap() {
      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var that = this;
      var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
      console.log('中心点',myLatlng)
      //定义工厂模式函数
      var myOptions = {
        zoom: 13, //设置地图缩放级别
        center: myLatlng, //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
        zoomControlOptions: {
          //设置缩放控件的位置为相对左方中间位置对齐.
          position: qq.maps.ControlPosition.RIGHT_TOP,
        },
        panControlOptions: {
          //设置平移控件的位置为相对右方中间位置对齐.
          position: qq.maps.ControlPosition.RIGHT_TOP,
        },
      };
      // //获取dom元素添加地图信息
      var map = new qq.maps.Map(
        document.getElementById("container"),
        myOptions
      );
      that.map=map
      //第三部分
      //给定位的位置添加图片标注
      that.marker= new qq.maps.Marker({
        position: myLatlng,
        map: map,
      });
      geocoder = new qq.maps.Geocoder();
      geocoder.getAddress(myLatlng);
      geocoder.setComplete(function (result) {
        that.address = result.detail.address;
      });
      qq.maps.event.addListener(map, "click", function (event) {
        that.longitude = event.latLng.getLng();
        that.latitude = event.latLng.getLat();
        let myLatlng = new qq.maps.LatLng(that.latitude, that.longitude);
   
        map.setCenter(myLatlng);
        that.marker.setMap(null);
        that.marker = null;
        that.marker = new qq.maps.Marker({
          position: myLatlng,
          map: map,
        });
        //地址和经纬度之间进行转换服务
        geocoder.getAddress(myLatlng);
        geocoder.setComplete(function (result) {
          that.address = result.detail.address;
        });
            
        //若服务请求失败，则运行以下函数
        geocoder.setError(function () {
          alert("出错了！！！");
        });
      });
    },
  },
  watch: {
    mapData(val) {
      if(val.lat && val.lng){
      this.latitude = val.lat;
      this.longitude = val.lng;
      this.address = val.address;
      this.setMap();
      }
    
    },
    showmap(val) {
      if (val) {
        this.$nextTick(() => {
          this.setMap();
        });
      }
    },
  },
  mounted() {},
};
</script>
​
<style lang="scss" scoped>
.mapBox {
  position: relative;
  height: 500px;
  .search_Map {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 99009;
    input {
      border: 1px solid #f1f1f1;
      display: inline-block;
      width: 400px;
      height: 40px;
      padding: 10px;
      color: #5a5a5a;
      background: rgba(255, 255, 255, 0.904);
    }
    .content {
      width: 400px;
      background: rgba(252, 250, 250, 0.918);
      border: 1px solid #f1f1f1;
      border-top: none;
      font-size: 13px;
      color: #5a5a5a;
      max-height: 350px;
      overflow-y: auto;
      p {
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 380px;
        border-bottom: 1px solid #f1f1f1;
        padding: 15px 10px;
        margin: 0;
        cursor: pointer;
        &:hover {
          background: #eff6fd;
        }
        .address {
          font-size: 12px;
          color: #b9b9b9;
          margin-left: 20px;
        }
      }
    }
  }
}
#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>